@page "/diarySetting"
@namespace SwashbucklerDiary.Rcl.Pages
@inherits ImportantComponentBase

<MyAppBar Title="@(I18n.T("Diary"))"
          OnClick="NavigateToBack">
</MyAppBar>

<ScrollContainer>
    <MCard Class="my-list-card"
           Elevation="0"
           Rounded="@("lg")">
        <MList>
            <MListItem>
                <MListItemIcon>
                    <MIcon Class="evident-icon">
                        title
                    </MIcon>
                </MListItemIcon>
                <MListItemContent>
                    @(I18n.T("Title"))
                </MListItemContent>
                <MListItemAction>
                    <SettingSwitch @bind-Value="title"
                                   SettingKey="@nameof(Setting.Title)">
                    </SettingSwitch>
                </MListItemAction>
            </MListItem>

            <MDivider Class="mx-5"></MDivider>

            <MListItem>
                <MListItemIcon>
                    <MIcon Class="evident-icon">
                        markdown
                    </MIcon>
                </MListItemIcon>
                <MListItemContent>
                    @(I18n.T("Markdown"))
                </MListItemContent>
                <MListItemAction>
                    <SettingSwitch @bind-Value="markdown"
                                   SettingKey="@nameof(Setting.Markdown)">
                    </SettingSwitch>
                </MListItemAction>
            </MListItem>

            <MDivider Class="mx-5"></MDivider>

            <MListItem>
                <MListItemIcon>
                    <MIcon Class="evident-icon">
                        info
                    </MIcon>
                </MListItemIcon>
                <MListItemContent>
                    @(I18n.T("Other information"))
                </MListItemContent>
                <MListItemAction>
                    <SettingSwitch @bind-Value="otherInfo"
                                   SettingKey="@nameof(Setting.OtherInfo)">
                    </SettingSwitch>
                </MListItemAction>
            </MListItem>
        </MList>
    </MCard>

    <MCard Class="my-list-card"
           Elevation="0"
           Rounded="@("lg")">
        <MList>
            <MListItem>
                <MListItemIcon>
                    <MIcon Class="evident-icon">
                        mdi:mdi-alphabetical
                    </MIcon>
                </MListItemIcon>
                <MListItemContent>
                    @(I18n.T("Weather and mood text"))
                </MListItemContent>
                <MListItemAction>
                    <SettingSwitch @bind-Value="diaryIconText"
                                   SettingKey="@nameof(Setting.DiaryIconText)">
                    </SettingSwitch>
                </MListItemAction>
            </MListItem>

            <MDivider Class="mx-5"></MDivider>

            <MListItem OnClick="()=>showEditAutoSave=true">
                <MListItemIcon>
                    <MIcon Class="evident-icon">
                        save_as
                    </MIcon>
                </MListItemIcon>
                <MListItemContent>
                    @(I18n.T("Auto save"))
                </MListItemContent>
                <MListItemContent Class="setting-item-state">
                    <MListItemSubtitle>
                        @EditAutoSaveText
                    </MListItemSubtitle>
                </MListItemContent>
                <MListItemAction>
                    <MIcon>chevron_right</MIcon>
                </MListItemAction>
            </MListItem>

            <MDivider Class="mx-5"></MDivider>

            <MListItem OnClick="@(() => showDiaryTimeFormat = true)">
                <MListItemIcon>
                    <MIcon Class="evident-icon">
                        calendar_clock
                    </MIcon>
                </MListItemIcon>
                <MListItemContent>
                    @(I18n.T("Time format"))
                </MListItemContent>
                <MListItemContent Class="setting-item-state">
                    <MListItemSubtitle>
                        @(I18n.TForTimeFormat(DiaryTimeFormatKey))
                    </MListItemSubtitle>
                </MListItemContent>
                <MListItemAction>
                    <MIcon>chevron_right</MIcon>
                </MListItemAction>
            </MListItem>
        </MList>
    </MCard>

    <MCard Class="my-list-card"
           Elevation="0"
           Rounded="@("lg")">
        <MList>
            <MListItem OnClick="@(()=>To("outlineSetting"))">
                <MListItemIcon>
                    <MIcon Class="evident-icon">
                        format_list_bulleted
                    </MIcon>
                </MListItemIcon>
                <MListItemContent>
                    @(I18n.T("Outline"))
                </MListItemContent>
                <MListItemAction>
                    <MIcon>chevron_right</MIcon>
                </MListItemAction>
            </MListItem>

            <MDivider Class="mx-5"></MDivider>

            <MListItem>
                <MListItemIcon>
                    <MIcon Class="evident-icon">
                        format_indent_increase
                    </MIcon>
                </MListItemIcon>
                <MListItemContent>
                    @(I18n.T("First line indentation"))
                </MListItemContent>
                <MListItemAction>
                    <SettingSwitch @bind-Value="firstLineIndent"
                                   SettingKey="@nameof(Setting.FirstLineIndent)">
                    </SettingSwitch>
                </MListItemAction>
            </MListItem>

            <MDivider Class="mx-5"></MDivider>

            <MListItem>
                <MListItemIcon>
                    <MIcon Class="evident-icon">
                        format_list_numbered
                    </MIcon>
                </MListItemIcon>
                <MListItemContent>
                    @(I18n.T("Code line number"))
                </MListItemContent>
                <MListItemAction>
                    <SettingSwitch @bind-Value="codeLineNumber"
                                   SettingKey="@nameof(Setting.CodeLineNumber)">
                    </SettingSwitch>
                </MListItemAction>
            </MListItem>

            <MDivider Class="mx-5"></MDivider>

            <MListItem>
                <MListItemIcon>
                    <MIcon Class="evident-icon">
                        mdi:mdi-checkbox-blank-off-outline
                    </MIcon>
                </MListItemIcon>
                <MListItemContent>
                    @(I18n.T("Task list line-through"))
                </MListItemContent>
                <MListItemAction>
                    <SettingSwitch @bind-Value="taskListLineThrough"
                                   SettingKey="@nameof(Setting.TaskListLineThrough)">
                    </SettingSwitch>
                </MListItemAction>
            </MListItem>
        </MList>
    </MCard>

    <MCard Class="my-list-card"
           Elevation="0"
           Rounded="@("lg")">
        <MList>
            <MListItem>
                <MListItemIcon>
                    <MIcon Class="evident-icon">
                        mdi:mdi-image-refresh-outline
                    </MIcon>
                </MListItemIcon>
                <MListItemContent>
                    @(I18n.T("Lazy image load"))
                </MListItemContent>
                <MListItemAction>
                    <SettingSwitch @bind-Value="imageLazy"
                                   SettingKey="@nameof(Setting.ImageLazy)">
                    </SettingSwitch>
                </MListItemAction>
            </MListItem>

            <MDivider Class="mx-5"></MDivider>

            <MListItem>
                <MListItemIcon>
                    <MIcon Class="evident-icon">
                        play_arrow
                    </MIcon>
                </MListItemIcon>
                <MListItemContent>
                    @(I18n.T("Audio and video auto play"))
                </MListItemContent>
                <MListItemAction>
                    <SettingSwitch @bind-Value="autoPlay"
                                   SettingKey="@nameof(Setting.AutoPlay)">
                    </SettingSwitch>
                </MListItemAction>
            </MListItem>
        </MList>
    </MCard>
</ScrollContainer>

<SelectChipDialog @bind-Visible="showEditAutoSave"
                  @bind-Value="@editAutoSave"
                  @bind-Value:after="UpdateEditAutoSaveSetting"
                  Title="@(I18n.T("Auto save"))"
                  Items="editAutoSaveItems"
                  Mandatory="true">
</SelectChipDialog>

<RadioDialog @bind-Value="diaryTimeFormat"
             @bind-Visible="showDiaryTimeFormat"
             Title="@(I18n.T("Time format"))"
             TItemValue="string"
             TItem="KeyValuePair<string, string>"
             OnChange="UpdateDiaryTimeFormatSetting"
             Items="diaryTimeFormats"
             ItemText="it => I18n.TForTimeFormat(it.Key)">
</RadioDialog>
